<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>树网格之页脚 - jQuery EasyUI 演示</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2 title="TreeGrid with Footer">树网格之页脚</h2>
	<p title="Show summary information on TreeGrid footer.">　　树网格的页脚可用来显示摘要信息。</p>
	<div style="margin:10px 0;"></div>
	<table id="tg"></table>
	<script type="text/javascript">
		$(function(){
			$('#tg').treegrid({
				title:'<ch title=\'TreeGrid with Footer\'>&nbsp;带页脚的树网格</ch>',
				iconCls:'icon-ok',
				width:640,
				height:280,
				rownumbers: true,
				animate:true,
				collapsible:true,
				fitColumns:true,
				url:'treegrid_data2.json',
				method: 'get',
				idField:'id',
				treeField:'name',
				showFooter:true,
				columns:[[
	                {field:'name',title:'<h title=\"Task Name\">工程项目</h>',halign:'center'},
					{field:'persons',title:'<h title=\"Persons\">投入人力</h>',width:60,align:'right',halign:'center'},
					{field:'begin',title:'<h title=\"Begin Date\">开工日期</h>',width:85,align:'center'},
					{field:'end',title:'<h title=\"End Date\">竣工日期</h>',width:85,align:'center'},
					{field:'progress',title:'<h title=\"Progress\">当前施工进度</h>',width:120,halign:'center',
					    formatter:function(value){
					    	if (value){
						    	var s = '<div style="width:100%;border:1px solid #ccc"><div style="text-align:right; width:' + value + '%;background:#cc0000;color:#fff">' + value + '％' + '</div></div>';
						    	return s;
					    	} else {return '';}
				    	}
					}
				]]
			});
		})
	</script>
</body>
</html>